<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>02_监听基本使用</title>
  <!-- 引入Vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
  <!-- 准备好一个容器-->
  <div id="demo">
    <h1>今天天气很{{ishot}}</h1>
    <img :src="url" alt="">
    <button @click="onchangeWether">切换天气</button>
  </div>
</body>

<script type="text/javascript">
  //阻止 vue 在启动时生成生产提示。
  Vue.config.productionTip = false;
  new Vue({
    el: '#demo',
    data: {
      isHot: true,
    },
    methods: {
      onchangeWether() {
        this.isHot = !this.isHot
      },
    },
    computed: {
      ishot() {
        return this.isHot ? '炎热' : '凉爽'
      },
      url() {
        return this.isHot ? 'http://49.232.112.44/images/hot.jpg' : 'http://49.232.112.44/images/cool.jpg'
      }
    },
    // watch: {
    //   isHot: {
    //     immediate: true,
    //     handler(value) {
    //       if (value) {
    //         this.url = 'http://49.232.112.44/images/hot.jpg'
    //       } else {
    //         this.url = 'http://49.232.112.44/images/cool.jpg'
    //       }
    //     }
    //   }
    // }
  })
</script>

</html>